<template>
  <div class="inventory-page">
    <div class="container">
      <!-- 页面头部 -->
      <div class="page-header">
        <h1>库存管理系统</h1>
        <div class="header-actions">
          <el-button type="primary" @click="openAddProductModal">添加商品</el-button>
          <el-button type="success" @click="refreshInventory">刷新库存</el-button>
          <el-button @click="goBack">返回首页</el-button>
        </div>
      </div>

      <!-- 统计信息 -->
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-number">{{ totalProducts }}</div>
          <div class="stat-label">总商品数</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ totalStock }}</div>
          <div class="stat-label">总库存量</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ lowStockCount }}</div>
          <div class="stat-label">库存不足</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ outOfStockCount }}</div>
          <div class="stat-label">缺货商品</div>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="search-filter">
        <div class="jd-search-box">
          <div class="search-input-wrapper">
            <i class="search-icon">🔍</i>
            <el-input 
              v-model="searchKeyword" 
              placeholder="搜索商品名称或编码..."
              @input="onSearchInput"
              clearable
              class="jd-search-input"
            />
            <el-button 
              type="primary" 
              @click="searchProducts"
              class="jd-search-btn"
            >
              搜索
            </el-button>
          </div>
        </div>
        <div class="filter-options">
          <el-select v-model="selectedCategory" @change="filterByCategory" placeholder="全部分类" clearable class="jd-select">
            <el-option 
              v-for="category in categories" 
              :key="category.id" 
              :label="category.name" 
              :value="category.id"
            />
          </el-select>
          <el-select v-model="stockFilter" @change="filterByStock" placeholder="全部库存状态" clearable class="jd-select">
            <el-option label="有库存" value="inStock" />
            <el-option label="库存不足" value="lowStock" />
            <el-option label="缺货" value="outOfStock" />
          </el-select>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="products-table">
        <el-table 
          :data="paginatedProducts" 
          style="width: 100%"
          :header-cell-style="{ background: '#f8f9fa', color: '#333', fontWeight: '600' }"
          stripe
        >
          <el-table-column prop="image" label="商品图片" width="80">
            <template #default="{ row }">
              <el-image 
                :src="row.image" 
                :alt="row.name"
                style="width: 50px; height: 50px; border-radius: 6px;"
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="code" label="商品编码" />
          <el-table-column label="分类">
            <template #default="{ row }">
              {{ getCategoryName(row.categoryId) }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格">
            <template #default="{ row }">
              ¥{{ row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="库存" />
          <el-table-column label="状态">
            <template #default="{ row }">
              <el-tag 
                :type="getStatusType(row.stock)"
                :color="getStatusColor(row.stock)"
                :style="getStatusTextStyle(row.stock)"
              >
                {{ getStatusText(row.stock) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button 
                type="primary" 
                size="small" 
                @click="openStockModal(row)"
                :disabled="row.stock <= 0"
              >
                扣除库存
              </el-button>
              <el-button 
                type="info" 
                size="small" 
                @click="showProductDetail(row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="itemsPerPage"
          :page-sizes="[10, 20, 50, 100]"
          :total="filteredProducts.length"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 扣除库存弹窗 -->
      <el-dialog 
        v-model="showStockModal" 
        title="扣除库存" 
        width="500px"
        :before-close="closeStockModal"
      >
        <div class="product-info">
          <el-image 
            :src="selectedProduct.image" 
            :alt="selectedProduct.name"
            style="width: 60px; height: 60px; border-radius: 8px;"
            fit="cover"
          />
          <div>
            <h4>{{ selectedProduct.name }}</h4>
            <p>当前库存: {{ selectedProduct.stock }}</p>
          </div>
        </div>
        <el-form :model="deductionForm" label-width="100px">
          <el-form-item label="扣除数量:">
            <el-input-number 
              v-model="deductionAmount" 
              :min="1" 
              :max="selectedProduct.stock"
              @change="validateDeduction"
            />
          </el-form-item>
          <el-form-item label="扣除原因:">
            <el-select v-model="deductionReason" placeholder="请选择原因">
              <el-option label="销售出库" value="sale" />
              <el-option label="商品损坏" value="damage" />
              <el-option label="商品过期" value="expired" />
              <el-option label="库存调整" value="adjustment" />
              <el-option label="其他" value="other" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注:">
            <el-input 
              v-model="deductionNote" 
              type="textarea" 
              placeholder="请输入备注信息..."
              :rows="3"
            />
          </el-form-item>
          <el-form-item label="操作人:">
            <el-input v-model="operatorName" placeholder="请输入操作人姓名" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeStockModal">取消</el-button>
            <el-button type="primary" @click="confirmDeduction">确认扣除</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 添加商品弹窗 -->
      <el-dialog 
        v-model="showAddProductModal" 
        title="添加商品" 
        width="500px"
        :before-close="closeAddProductModal"
      >
        <el-form :model="newProduct" label-width="100px">
          <el-form-item label="商品名称:" required>
            <el-input v-model="newProduct.name" placeholder="请输入商品名称" />
          </el-form-item>
          <el-form-item label="商品编码:" required>
            <el-input v-model="newProduct.code" placeholder="请输入商品编码" />
          </el-form-item>
          <el-form-item label="商品分类:" required>
            <el-select v-model="newProduct.categoryId" placeholder="请选择分类">
              <el-option 
                v-for="category in categories" 
                :key="category.id" 
                :label="category.name" 
                :value="category.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="商品价格:" required>
            <el-input-number 
              v-model="newProduct.price" 
              :min="0" 
              :precision="2"
              placeholder="请输入价格"
            />
          </el-form-item>
          <el-form-item label="初始库存:">
            <el-input-number 
              v-model="newProduct.stock" 
              :min="0"
              placeholder="请输入初始库存"
            />
          </el-form-item>
          <el-form-item label="商品图片:">
            <el-input v-model="newProduct.image" placeholder="请输入图片URL" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeAddProductModal">取消</el-button>
            <el-button type="primary" @click="addProduct">添加商品</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 成功消息 -->
      <el-message
        v-if="showSuccessMessage"
        :type="'success'"
        :message="successMessage"
        :duration="3000"
        @close="showSuccessMessage = false"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { addProduct as addProductAPI, getAllProducts as getAllProductsAPI } from '../services/productApi'

// 响应式数据
const searchKeyword = ref('')
const selectedCategory = ref('')
const stockFilter = ref('')
const currentPage = ref(1)
const itemsPerPage = ref(10)

// 弹窗状态
const showStockModal = ref(false)
const showAddProductModal = ref(false)
const showSuccessMessage = ref(false)
const successMessage = ref('')

// 选中的商品
const selectedProduct = ref({
  id: 0,
  name: '',
  code: '',
  price: 0,
  stock: 0,
  categoryId: 0,
  image: ''
})

// 扣除库存表单
const deductionAmount = ref(1)
const deductionReason = ref('')
const deductionNote = ref('')
const operatorName = ref('')

// 新商品表单
const newProduct = ref({
  name: '',
  code: '',
  price: 0,
  stock: 0,
  categoryId: 0,
  image: ''
})

// 商品数据
const products = ref([
  {
    id: 1,
    name: 'iPhone 15 Pro',
    code: 'IP15P001',
    price: 8999,
    stock: 50,
    categoryId: 1,
    image: 'https://via.placeholder.com/100x100/007AFF/white?text=iPhone'
  },
  {
    id: 2,
    name: 'MacBook Air M2',
    code: 'MBA001',
    price: 9999,
    stock: 25,
    categoryId: 2,
    image: 'https://via.placeholder.com/100x100/34C759/white?text=MacBook'
  },
  {
    id: 3,
    name: 'AirPods Pro',
    code: 'APP001',
    price: 1999,
    stock: 100,
    categoryId: 3,
    image: 'https://via.placeholder.com/100x100/FF9500/white?text=AirPods'
  },
  {
    id: 4,
    name: 'iPad Air',
    code: 'IPA001',
    price: 4799,
    stock: 30,
    categoryId: 4,
    image: 'https://via.placeholder.com/100x100/FF2D92/white?text=iPad'
  },
  {
    id: 5,
    name: 'Apple Watch Series 9',
    code: 'AWS001',
    price: 3299,
    stock: 15,
    categoryId: 5,
    image: 'https://via.placeholder.com/100x100/FF3B30/white?text=Watch'
  }
])

// 分类数据
const categories = ref([
  { id: 1, name: '手机' },
  { id: 2, name: '电脑' },
  { id: 3, name: '耳机' },
  { id: 4, name: '平板' },
  { id: 5, name: '智能手表' }
])

// 计算属性
const filteredProducts = computed(() => {
  let filtered = products.value

  // 搜索过滤
  if (searchKeyword.value) {
    filtered = filtered.filter((product: any) =>
      product.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      product.code.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }

  // 分类过滤
  if (selectedCategory.value) {
    filtered = filtered.filter((product: any) => product.categoryId === parseInt(selectedCategory.value))
  }

  // 库存状态过滤
  if (stockFilter.value) {
    switch (stockFilter.value) {
      case 'inStock':
        filtered = filtered.filter((product: any) => product.stock > 10)
        break
      case 'lowStock':
        filtered = filtered.filter((product: any) => product.stock > 0 && product.stock <= 10)
        break
      case 'outOfStock':
        filtered = filtered.filter((product: any) => product.stock === 0)
        break
    }
  }

  return filtered
})

const paginatedProducts = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value
  const end = start + itemsPerPage.value
  return filteredProducts.value.slice(start, end)
})

const totalPages = computed(() => {
  return Math.ceil(filteredProducts.value.length / itemsPerPage.value)
})

const totalProducts = computed(() => products.value.length)

const totalStock = computed(() => {
  return products.value.reduce((sum: number, product: any) => sum + product.stock, 0)
})

const lowStockCount = computed(() => {
  return products.value.filter((product: any) => product.stock > 0 && product.stock <= 10).length
})

const outOfStockCount = computed(() => {
  return products.value.filter((product: any) => product.stock === 0).length
})

// 方法
const getCategoryName = (categoryId: number) => {
  const category = categories.value.find((c: any) => c.id === categoryId)
  return category ? category.name : '未知分类'
}

const getStatusText = (stock: number) => {
  if (stock === 0) return '缺货'
  if (stock <= 10) return '库存不足'
  return '有库存'
}

const getStatusType = (stock: number) => {
  if (stock === 0) return 'danger'
  if (stock <= 10) return 'warning'
  return 'success'
}

const getStatusColor = (stock: number) => {
  if (stock === 0) return '#ffebee' // 浅红色背景
  if (stock <= 10) return '#fff3e0' // 浅橙色背景
  return '#e8f5e8' // 浅绿色背景
}

const getStatusTextStyle = (stock: number) => {
  if (stock === 0) return { color: '#FF3B30' } // 红色文字
  if (stock <= 10) return { color: '#FF9500' } // 橙色文字
  return { color: '#34C759' } // 绿色文字
}

const openStockModal = (product: any) => {
  Object.assign(selectedProduct.value, product)
  deductionAmount.value = 1
  deductionReason.value = ''
  deductionNote.value = ''
  operatorName.value = ''
  showStockModal.value = true
}

const closeStockModal = () => {
  showStockModal.value = false
}

const validateDeduction = () => {
  if (deductionAmount.value > selectedProduct.value.stock) {
    deductionAmount.value = selectedProduct.value.stock
  }
  if (deductionAmount.value < 1) {
    deductionAmount.value = 1
  }
}

const confirmDeduction = () => {
  // 扣除库存
  const product = products.value.find((p: any) => p.id === selectedProduct.value.id)
  if (product) {
    product.stock -= deductionAmount.value
    
    // 记录操作日志
    const log = {
      id: Date.now(),
      productId: product.id,
      productName: product.name,
      amount: deductionAmount.value,
      reason: deductionReason.value,
      note: deductionNote.value,
      operator: operatorName.value,
      timestamp: new Date().toLocaleString()
    }
    
    console.log('库存扣除记录:', log)
    
    // 显示成功消息
    successMessage.value = `成功扣除 ${product.name} 库存 ${deductionAmount.value} 件`
    showSuccessMessage.value = true
    
    setTimeout(() => {
      showSuccessMessage.value = false
    }, 3000)
  }
  
  closeStockModal()
}

const openAddProductModal = () => {
  showAddProductModal.value = true
}

const closeAddProductModal = () => {
  showAddProductModal.value = false
  // 重置表单
  Object.assign(newProduct.value, {
    name: '',
    code: '',
    price: 0,
    stock: 0,
    categoryId: 0,
    image: ''
  })
}

// 添加商品到数据库
const addProduct = async () => {
  if (newProduct.value.name && newProduct.value.categoryId && newProduct.value.price > 0) {
    try {
      // 准备API请求数据
      const productData = {
        name: newProduct.value.name,
        description: newProduct.value.code || '', // 使用code作为description
        price: newProduct.value.price,
        stock: newProduct.value.stock || 0,
        category: getCategoryName(newProduct.value.categoryId), // 转换分类ID为分类名称
        imageUrl: newProduct.value.image || 'https://via.placeholder.com/100x100/ccc/white?text=Product'
      }
      
      // 调用API添加商品
      const result = await addProductAPI(productData)
      
      if (result.success) {
        // 添加成功，更新本地数据
        const newProductItem = {
          id: result.data.id,
          name: result.data.name,
          code: result.data.description || '',
          price: result.data.price,
          stock: result.data.stock,
          categoryId: newProduct.value.categoryId, // 保持原有的分类ID
          image: result.data.imageUrl || 'https://via.placeholder.com/100x100/ccc/white?text=Product'
        }
        
        products.value.push(newProductItem)
        
        successMessage.value = `成功添加商品: ${newProductItem.name}`
        showSuccessMessage.value = true
        
        setTimeout(() => {
          showSuccessMessage.value = false
        }, 3000)
        
        closeAddProductModal()
        
        ElMessage.success('商品添加成功！')
      } else {
        ElMessage.error(`添加失败: ${result.message}`)
      }
    } catch (error) {
      console.error('添加商品时发生错误:', error)
      ElMessage.error('网络错误，请检查后端服务是否启动')
    }
  } else {
    ElMessage.error('请填写完整的商品信息')
  }
}

const showProductDetail = (product: any) => {
  ElMessage.info(`商品详情:\n名称: ${product.name}\n编码: ${product.code}\n价格: ¥${product.price}\n库存: ${product.stock}`)
}

// 从API加载商品列表
const loadProductsFromAPI = async () => {
  try {
    const result = await getAllProductsAPI()
    
    if (result.success) {
      // 转换API数据格式为本地格式
      products.value = result.data.map((item: any) => ({
        id: item.id,
        name: item.name,
        code: item.description || '',
        price: item.price,
        stock: item.stock,
        categoryId: getCategoryIdByName(item.category), // 根据分类名称获取分类ID
        image: item.imageUrl || 'https://via.placeholder.com/100x100/ccc/white?text=Product'
      }))
      
      ElMessage.success('商品数据已从数据库加载')
    } else {
      ElMessage.error('加载商品数据失败')
    }
  } catch (error) {
    console.error('加载商品数据时发生错误:', error)
    ElMessage.error('网络错误，请检查后端服务是否启动')
  }
}

// 根据分类名称获取分类ID
const getCategoryIdByName = (categoryName: string) => {
  const category = categories.value.find((c: any) => c.name === categoryName)
  return category ? category.id : 1 // 默认返回第一个分类
}

const refreshInventory = async () => {
  await loadProductsFromAPI()
  
  successMessage.value = '库存数据已刷新'
  showSuccessMessage.value = true
  
  setTimeout(() => {
    showSuccessMessage.value = false
  }, 2000)
}

const goBack = () => {
  const pageManager = (window as any).pageManager
  if (pageManager) {
    pageManager.showHomePage()
  }
}

const handleSizeChange = (size: number) => {
  itemsPerPage.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
}

onMounted(async () => {
  // 页面初始化时从API加载数据
  console.log('库存管理页面已加载')
  await loadProductsFromAPI()
})
</script>

<style scoped>
/* 基础样式 */
.inventory-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 按钮样式 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #007AFF;
  color: white;
}

.btn-secondary {
  background-color: #34C759;
  color: white;
}

.btn-outline {
  background-color: transparent;
  color: #007AFF;
  border: 1px solid #007AFF;
}

.btn-small {
  padding: 4px 8px;
  font-size: 12px;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  text-align: center;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #007AFF;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

/* 搜索和筛选 */
.search-filter {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.jd-search-box {
  position: relative;
  margin-bottom: 15px;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  padding: 8px 15px;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.search-input-wrapper:hover {
  border-color: #007AFF;
  box-shadow: 0 0 15px rgba(0, 122, 255, 0.15);
  background-color: white;
}

.search-input-wrapper:focus-within {
  border-color: #007AFF;
  box-shadow: 0 0 20px rgba(0, 122, 255, 0.2);
  background-color: white;
}

.search-icon {
  font-size: 18px;
  color: #999;
  margin-right: 10px;
  transition: color 0.3s ease;
}

.search-input-wrapper:hover .search-icon {
  color: #007AFF;
}

.jd-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 8px 0;
  background-color: transparent;
  color: #333;
  margin-right: 10px;
}

.jd-search-input::placeholder {
  color: #999;
  font-size: 14px;
}

.jd-search-btn {
  background: linear-gradient(135deg, #007AFF 0%, #0056b3 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.jd-search-btn:hover {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}

.jd-search-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.filter-options {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.jd-select {
  min-width: 150px;
}

.jd-select .el-input__inner {
  border-radius: 20px;
  padding: 10px 15px;
  font-size: 14px;
  border: 2px solid #e0e0e0;
  transition: all 0.3s ease;
}

.jd-select .el-input__inner:hover {
  border-color: #007AFF;
}

.jd-select .el-input__inner:focus {
  border-color: #007AFF;
  box-shadow: 0 0 10px rgba(0, 122, 255, 0.2);
}

.jd-select .el-select__caret {
  color: #666;
  transition: color 0.3s ease;
}

.jd-select:hover .el-select__caret {
  color: #007AFF;
}

/* 商品表格 */
.products-table {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

.products-table table {
  width: 100%;
  border-collapse: collapse;
}

.products-table th,
.products-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.products-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #333;
}

.products-table tr:hover {
  background-color: #f8f9fa;
}

.product-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}

/* 状态样式 */
.status-in-stock {
  color: #34C759;
  font-weight: 500;
}

.status-low-stock {
  color: #FF9500;
  font-weight: 500;
}

.status-out-of-stock {
  color: #FF3B30;
  font-weight: 500;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.page-info {
  color: #666;
  font-size: 14px;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: #f0f0f0;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #e0e0e0;
}

/* 表单样式 */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* 商品信息 */
.product-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.product-info img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.product-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.product-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 成功消息 */
.success-message {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #34C759;
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
  z-index: 1001;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .header-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .search-filter {
    padding: 15px;
  }
  
  .search-box {
    flex-direction: column;
  }
  
  .filter-options {
    flex-direction: column;
  }
  
  .products-table {
    overflow-x: auto;
  }
  
  .products-table table {
    min-width: 600px;
  }
  
  .modal-content {
    width: 95%;
    margin: 10px;
  }
}
</style>